<template>
	<div id="container">
		<h3>角色管理</h3>
		<!--查询模块-->
		<div class="row">
			<el-form :inline="true" :model="psRole" class="demo-form-inline">
				<el-form-item label="角色名称">
					<el-input v-model="psRole.rolename" placeholder="角色名称"></el-input>
				</el-form-item>
				<el-form-item label="启用状态">
					<el-select v-model="psRole.isstart" placeholder="--请选择--">
						<el-option label="启用" value="1"></el-option>
						<el-option label="未启用" value="0"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click.prevent="load()">查询</el-button>
					<el-button type="success" @click.prevent="toaddRole()">添加</el-button>

					<!-- 添加的弹出层 -->
					<el-dialog title="添加角色" :visible.sync="dialogFormVisible">
						<el-form :model="addPsRole">
							<el-form-item label="角色编号" :label-width="formLabelWidth">
								<el-input v-model="addPsRole.id" autocomplete="off"></el-input>
							</el-form-item>
							<el-form-item label="角色名称" :label-width="formLabelWidth">
								<el-input v-model="addPsRole.rolename" autocomplete="off"></el-input>
							</el-form-item>
							<el-form-item label="启用状态" :label-width="formLabelWidth">
								<el-radio v-model="addPsRole.isstart" label="1">启用</el-radio>
								<el-radio v-model="addPsRole.isstart" label="0">不启用</el-radio>
							</el-form-item>

						</el-form>
						<div slot="footer" class="dialog-footer">
							<el-button @click="dialogFormVisible = false">取 消</el-button>
							<el-button type="primary" @click="doaddRole()">确 定</el-button>
						</div>
					</el-dialog>
					<!-- 添加的弹出层结束 -->
				</el-form-item>
			</el-form>
		</div> <!--查询模块结束-->
		<el-table :data="roleList">
			<el-table-column property="id" label="角色编号"></el-table-column>
			<el-table-column property="rolename" label="角色名称"></el-table-column>
			<el-table-column property="createdby" label="创建人"></el-table-column>
			<el-table-column property="creationtime" label="更新时间">
				<!-- 在这里添加自定义的内容，比如格式化时间 -->
				<template slot-scope="scope">
					{{ scope.row.creationtime}} <!-- 假设formatDate是一个时间格式化的过滤器 -->
				</template>
			</el-table-column>
			<el-table-column property="isstart" label="状态(启用/未启用)">
				<template slot-scope="scope">
					<el-checkbox v-model="scope.row.isstart" :true-label="1" :false-label="0"
						@change="doUpdStart(scope.row)"></el-checkbox> <!-- 使用复选框展示状态 -->
				</template>
			</el-table-column>

			<el-table-column fixed="right" label="操作" width="100">
				<template slot-scope="scope">
					<el-button @click="toroleUpd(scope.row)" type="text" size="mini">修改</el-button>

					<!-- 修改的弹出层 -->
					<el-dialog title="修改角色" :visible.sync="dialogFormVisibleUpd" :modal-append-to-body="false">
						<el-form :model="UpdPsRole">
							<el-form-item label="角色编号" :label-width="formLabelWidth">
								<el-input v-model="UpdPsRole.id" autocomplete="off"></el-input>
							</el-form-item>
							<el-form-item label="角色名称" :label-width="formLabelWidth">
								<el-input v-model="UpdPsRole.rolename" autocomplete="off"></el-input>
							</el-form-item>
							<el-form-item label="启用状态" :label-width="formLabelWidth">
								<el-radio v-model="UpdPsRole.isstart" :label="1">启用</el-radio>
								<el-radio v-model="UpdPsRole.isstart" :label="0">不启用</el-radio>
							</el-form-item>
						</el-form>
						<div slot="footer" class="dialog-footer">
							<el-button @click="dialogFormVisibleUpd = false">取 消</el-button>
							<el-button type="primary" @click="doUpdRole()">确 定</el-button>
						</div>
					</el-dialog>
					<!-- 修改的弹出层结束 -->

					<el-button @click="roleDel(scope.row)" type="text" size="small">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!--分页-->
		<!--显示分页信息-->
		<div class="row  text-right">
			<!--文字信息-->
			<div class="col-md-6">
				当前第 <input name="startPage" :value="pageInfo.pageNum" style="width: 20px" />/{{pageInfo.pages}}页.一共
				{{pageInfo.total}}条记录
			</div>
			<!--点击分页-->
			<div class="col-md-6" style="z-index: 0;">
				<nav aria-label="Page navigation example">
					<ul class="pagination">
						<li class="page-item"><a class="page-link" href="javascript:;"
								@click="pageInfo.pageNum=1;load( )">首页</a></li>
						<li class="page-item" :class="{'disabled':!pageInfo.hasPreviousPage}">
							<a class="page-link" href="javascript:;" @click="pageInfo.pageNum=pageInfo.pageNum-1;load()"
								aria-label="Previous">
								<span aria-hidden="true">&laquo;</span>
							</a>
						</li>
						<li class="page-item" v-for="p in pageInfo.navigatepageNums"
							:class="{'active':pageInfo.pageNum==p}"><a class="page-link" href="javascript:;"
								@click="pageInfo.pageNum=p;load()" v-text="p"></a></li>
						<li class="page-item" :class="{'disabled':!pageInfo.hasNextPage}">
							<a class="page-link" href="javascript:;"
								@click="pageInfo.pageNum=pageInfo.pageNum-0+1;load()" aria-label="Next">
								<span aria-hidden="true">&raquo;</span>
							</a>
						</li>
						<li class="page-item"><a class="page-link" href="javascript:;"
								@click="pageInfo.pageNum=pageInfo.pages;load()">尾页</a></li>
					</ul>
				</nav>
			</div>
		</div>
		<!--分页结束-->
	</div>
</template>

<script>
	import {
		queryByRole,
		delById,
		addRoles,
		updRoles
	} from '@/config/request'
	export default {
		data() {
			return {
				psRole: {
					id: '',
					rolename: '',
					creationtime: '',
					createdby: '',
					lastupdatetime: '',
					isstart: '',
					pageNum: '1',
					str: '',
				},
				addPsRole: {
					id: '',
					rolename: '',
					creationtime: '',
					createdby: '',
					lastupdatetime: '',
					isstart: '1'
				},
				UpdPsRole: {
					id: '',
					rolename: '',
					creationtime: '',
					createdby: '',
					lastupdatetime: '',
					isstart: '0'
				},
				roleList: [],
				pageInfo: {},
				dialogFormVisible: false,
				dialogFormVisibleUpd: false,
				formLabelWidth: '120px',
				psUser: {},

			}
		},
		methods: {
			load() {
				this.psUser = JSON.parse(sessionStorage.getItem('psUser'));
				this.psRole.pageNum = this.pageInfo.pageNum;
				queryByRole(this.psRole).then(json => {
					this.pageInfo = json.data.pageInfo;
					this.roleList = json.data.pageInfo.list;
				})
			},
			toroleUpd(role) {
				this.dialogFormVisibleUpd = true;
				this.UpdPsRole = role;

			},
			doUpdRole() {
				this.dialogFormVisibleUpd = false;
				updRoles(this.UpdPsRole).then(json => {
					this.load();
				})
			},
			roleDel(role) {
				let flag = confirm("确认要删除该角色吗？");
				if (flag) {
					delById(role).then(json => {
						this.load();
					})
				}

			},
			toaddRole() {
				this.dialogFormVisible = true;
			},
			doaddRole() {
				this.dialogFormVisible = false;
				this.addPsRole.createdby = this.psUser.username;
				addRoles(this.addPsRole).then(json => {
					this.load();
				})
				this.addPsRole = {};
			},
			doUpdStart(role) {
				updRoles(role).then(json => {
					this.load();
				})
			}
		},
		mounted() {
			this.load();
		}
	}
</script>

<style>
</style>